{% extends 'mold_log/base.html' %}
{% block content %}
    <div>
        <form id="ff">
            {% csrf_token %}
            <div class="form-group">
                <div class="col-6">
                    <label for="product">型号</label>
                    <select class="custom-select" name="product" id="product">
                        {% for p in products %}
                            <option value="{{ p.product }}">{{ p.product }}</option>
                        {% endfor %}
                    </select>
                </div>

            </div>
            <button class="btn btn-success mb-2" id="btn_query">查询</button>
            <button class="btn btn-success mb-2" id="id_excel">下载Excel</button>

        </form>
    </div>
    <div id="c"><!--查询结果 --></div>
    <div id="myGrid" class="ag-theme-balham" style="height: 600px"><!--表格 --></div>
    <div id="rpt_upload" class="ag-theme-balham" style="height: 600px"><!--报告上传 --></div>
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function () {
            // csrf
            let csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();

            function csrfSafeMethod(method) {
                // these HTTP methods do not require CSRF protection
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }

            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $('#btn_query').click(function (evt) {
                evt.preventDefault();
                $.post('{% url "mold_log:query" %}',
                    $('#ff').serialize(),
                    function (data) {
                        console.log(data);
                        $('#c').html(data.html)
                    }
                );
            });

            // 表格
            // 列
            let btnIcon = function (cell, formatterParams, onRendered) {
                return "<button class='btn btn-primary'>报告</button>";
            };
            let rptCount = function (cell, formatterParams, onRendered) {
                let data = cell.getData();
                if (data.docs > 0)
                    return data.id + "<span class='badge badge-primary'>" + data.docs + "</span>";
                else
                    return data.id
            };
            let columns = [
                {title: 'id', field: 'id', formatter: rptCount, width: 70},
                {title: '工厂', field: 'factory', width: 90},
                {title: '品名', field: 'product'},
                {title: '模具号', field: 'mold_no'},
                {title: '问题', field: 'problem', formatter: "textarea", width: 200},
                {title: '改善内容', field: 'solution', formatter: "textarea", width: 300},
                {title: '改善区间', field: 'stage', formatter: "textarea"},
                {title: '改善前', field: 'before', formatter: "textarea"},
                {title: '改善后', field: 'after', formatter: "textarea"},
                {title: '结果判定', field: 'is_ok'},
                {title: '备注', field: 'comment'},
                {
                    title: '操作',
                    formatter: btnIcon,
                    cellClick: function (e, cell) {
                        console.log(cell);
                        let data = cell.getData();  // 单元格数据
                        $("#rpt_upload").iziModal({
                            title: '报告',
                            headerColor: '#35b99b',
                            iframe: true,
                            width: '60%',
                            iframeHeight: 600,
                            radius: 3,
                            transitionIn: 'comingIn',
                            iframeURL: '{% url "mold_log:rpt_view" %}'
                                + '?p=' + data.id,
                            onClosed: function () {
                                $('#rpt_upload').iziModal('destroy');
                            }
                        });
                        $('#rpt_upload').iziModal('open');
                    }
                }
            ];
            // 选项
            let data = {{data|safe}};
            // console.log(data);

            // 初始化
            let grid = new Tabulator('#myGrid', {
                dataTree: true,
                dataTreeFilter: false,
                layout: "fitColumns",
                columns: columns,
                data: data,
                pagination: "local",
                paginationSize: 10,
            });


        });

    </script>
{% endblock %}